<!--{#这里的主页不能全为空, 不然父窗口不会进行加载, 从而导致iframe调用父窗口的方法失败!#}-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    {#  {% load static %}#}
    {#  <script src="{% static '/js/echarts.min.js' %}"></script>#}
    <!-- ECharts单文件引入 -->
    {#<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>#}
    {#  <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>#}
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <meta name="viewport" content="width=device-width, user-scalable=no,
           initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
{# <div id="main" style="width: 600px;height:400px;"></div>#}
<div style="
    display: flex;
    justify-content: space-between;
  ">
    <div id="main" style="width: 49%;height: 300%;"></div>
    <div id="right" style="width: 49%;height: 300%;"></div>
</div>


{#  <button onclick="jump_to()">点击跳转</button>#}


<script>
    function jump_to(target) {
        if (target.url) window.parent.jump_to(target);
        else console.log('target.url为空, 无法跳转!')
    }
</script>


<script type="text/javascript">
    function conv_value_unit(value, decimal = 1) {
        {#console.log(value.value, value.name, '--- index: ', index, "{{ test123 }}", '{{ info_js | safe }}');#}
        if (value >= 10000 && value < 10000000) {
            value = (value / 10000).toFixed(decimal) + "万";
        } else if (value >= 10000000) {
            value = (value / 10000000).toFixed(decimal) + "千万";
        }
        return value;
    }

    var legend__data = JSON.parse('{{ legend__data | safe }}');
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        {#color: 'red',#}
        title: {
            text: "{{ title__text }}"
        },
        tooltip: {
            trigger: 'axis',
            //主要代码
            formatter: function (params) {
                const unit = " (条)";
                var result = params[0].axisValue + "<br/>";
                {#console.log(params);#}
                params.forEach(function (item) {
                    result += item.marker + item.seriesName + "：" + conv_value_unit(item.data.value, 2) + unit + "<br/>"
                });
                return result
            }
        },
        {% if show__legend %}
            legend: {
                data: legend__data,
            },
        {% endif %}
        xAxis: {
            type: 'category',
            data: JSON.parse('{{ xAxis__data | safe }}'),
            axisLabel: {
                borderWidth: 10, // 大小盖住你的文本即可 解决x轴文字最后一个加粗问题
                borderColor: '#ffffff', // 背景色
                interval: 0,//横轴信息全部显示
                rotate: -30,//-30度角倾斜显示
                margin: 15,//文字与x轴的上下间距
                // fontWeight: 10
            },
        },

        yAxis: {
            name: "单位（条）",
            nameTextStyle: {
                color: "#aaa",
                nameLocation: "start",
            },
            axisLabel: {
                margin: 10,
                formatter: function (value, index) {
                    return conv_value_unit(value, 0);
                }
            },
            type: "{{ bar_type }}"     // 差距过大时用log
        },
        series: [
            {
                name: legend__data[0],
                {#data: [123, 200, 150, 80, 70, 110, 130],#}
                data: [
                    {value: 335, name: "销量"},
                    {value: 310, name: "销量123"},
                    {value: 234, name: "销量"},
                    {value: 135, name: "销量"},
                    {value: 1548, name: "销量", url: "http://www.baidu.com"},
                    555,
                    666
                ],
                type: 'bar',
                itemStyle: {
                    normal: {
                        label: {
                            formatter: function (value) {
                                return conv_value_unit(value.value);
                            },
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'black',
                                fontSize: 16,
                                textBorderWidth: 3,
                                backgroundColor: 'white',
                                borderColor: 'black',
                                borderWidth: 1,
                                marginTop: 10,
                                padding: 6
                            },
                        }
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
    myChart.on('click', function (param) {
        {#console.log("~~~ param: ", param.name + ":", param.data.name, "---", param.data.value, '---', param.data.url);#}
        jump_to(param.data);
    });

    function refreshData(data, xAxis__data) {
        //刷新数据
        var option = myChart.getOption();
        option.series[0].data = data;
        myChart.setOption(option);
    }

    const info_js = JSON.parse('{{ info_js | safe }}');
    const xAxis__data = JSON.parse('{{ xAxis__data | safe }}');
    refreshData(info_js, xAxis__data);

</script>

<script type="text/javascript">
    var pie_dc = JSON.parse('{{ pie_dc | safe }}');
    {#console.log("pie_dc ---", pie_dc);#}
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('right'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: pie_dc.title
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                const unit = " (条)";
                var result = params.data.name + "<br/>" + "数量: " + conv_value_unit(params.data.value, 2) + unit + "<br/>"
                    + "占比: " + params.data.percent + "<br/>";
                return result
            }
        },
        legend: {
            bottom: '0%',
            left: 'center'
        },
        series: [
            {
                name: pie_dc.series.name,
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                labelLine: {
                    show: false
                },
                data: pie_dc.series.data
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart.on('click', function (param) {
        {#console.log(param.name + ":", param.data.name, "---", param.data.value, '---', param.data.url);#}
        jump_to(param.data);
    });
</script>
</body>

</html>